
import { Layout, Menu } from 'antd';
import React, { useEffect, useState } from 'react';
import store from "../../store";
import { useNavigate } from "react-router-dom";
import { filterAuth } from "../../config/leftMeum";
import { adminDetail } from "../../http/request";
const { Sider } = Layout;

//导航数据





const HomeSider = () => {
    //全局状态数据解构
    const [state, setState] = useState(store.getState());
    // 定义state - 存储menu
    let [menu, setMenu] = useState([])
    const rootSubmenuKeys = menu.map(item => item.key + '');

    // 让菜单刷新后也能显示展开
    const openMenu = localStorage.getItem('openMenu') ? localStorage.getItem('openMenu').split(",") : ["0-0"]
    // 开始搭建左侧菜单
    const [openKeys, setOpenKeys] = useState(openMenu);
    // 一级菜单的展开收回执行的回调函数
    // console.log(localStorage.getItem('openMenu').split(","),openKeys);
    useEffect(() => {
        adminDetail(localStorage.getItem("adminname")).then(res => {
            console.log(res.data.data[0].checkedKeys[0]);
            // 在这里对menu修改 - 过滤
            let quanxian = res.data.data[0].checkedKeys[0]
            if (quanxian === undefined) {
                quanxian = '*'
            } else {
                quanxian = quanxian.split(',')
                // console.log(quanxian);
            }
            // 改state中的menu
            setMenu(() => {
                return filterAuth(quanxian)
            })
            // console.log(menu);
        })
    }, [])

    //全局状态数据更新
    store.subscribe(() => {
        setState(state => {
            return store.getState()
        })
    })
    //路由的跳转
    const Navigate = useNavigate()

    const toPath = ({ item, key, keyPath, domEvent }) => {
        Navigate(item.props.topath)
        localStorage.setItem("openMenu", keyPath)
    }

    return (
        <Sider trigger={null} collapsible collapsed={state.collapsed}>
            <div className="logo" />
            <Menu
                theme="dark"
                mode="inline"
                defaultOpenKeys={openKeys}
                defaultSelectedKeys={openKeys}
                items={menu}
                onClick={toPath}
            />
        </Sider>
    )
}

export default HomeSider